/* Reset and Base Styles */
* { margin: 0; box-sizing: border-box; }
body { font-family: Arial, sans-serif; line-height: 1.2; margin: 0; }



/* Desktop: horizontal row */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Columns */
.header-left-col {   flex: 0 0 245px;   }
.header-mid-col {     flex: 1;           text-align: center; }
.header-right-col {  flex: 0 0 214px;   text-align: right; }

/* Mobile: narrow screens stack columns */
@media (max-width: 720px) {
  .header {
    flex-direction: column;
    align-items: center;    /* center each block */
  }

  .header-left-col,
  .header-mid-col,
  .header-right-col {
    flex: none;             /* no flex resizing */
    /* width: 100%;            /* full-width */
    text-align: center;     /* center content on mobile */
    margin-bottom: 0.5rem;  /* spacing between stacked items */
  }

  /* Optional: remove margin under last item */
  .header-right-col {
    margin-bottom: 0;
  }
}

/* Typography */
h2 { font-size: 1.3rem;  margin-left: 0.5rem; }
p {  margin-left: 1.5rem;}


/* Navigation */
.nav-toggle { display: none; font-size: 1.5rem; background: none; border: none; cursor: pointer; }
nav { display: block; }
nav ul { display: flex; list-style: none; gap: 1.5rem; padding: 0; }
nav a { text-decoration: none; color: #333; padding: 0.5rem; transition: 0.3s; }
nav a:hover { color: #5636FF; }

/* Header/Menu Ribbons */
.menu-ribbon { padding: 0.5rem 1rem; text-align: left; }
.header-inner { font-size: 1.3rem;  margin: 0 auto; text-align: right; padding: 0.5rem 1rem; }

/* Main Content Layout */
.main-content { display: flex; gap: 1rem; padding: 0; }
.left-column { flex: 0 0 30%; min-width: 300px; text-align: left; }
.right-column { flex: 1; max-width: 400px; }



/* Tables */
table { width: 100%; border-collapse: collapse; }
th, td { border: 0; padding: 1px; }
.highlight-row td { font-weight: bold; font-size: 1.2rem; text-align: center; color: #4444FF; }

/* Responsive: Narrow Screens */
@media (max-width: 640px) {
  /* Toggle and Nav 
  .nav-toggle { display: block; }
  nav { display: none; position: relative; top: auto; left: auto; width: 100%; background: #fff; }
  nav.open { display: block; }
  nav ul { flex-direction: column; padding: 1rem; }
*/

  /* Stack Main Content */
  .main-content { flex-direction: column; }

  

  /* Floats become inline logos above menu */
  .float-upper-left, .float-upper-right {
    position: relative;
    max-width: 50%;
    height: auto;
    margin: 0.5rem auto;
    order: 0;
  }

  /* Menu ribbons ordering */
  .menu-ribbon { order: 2; padding: 0.3rem 1rem; text-align: center; }
  .header-inner { padding: 0.4rem 1rem; }
}